<template>
    <div>
        <div class="userinfo-item">
            <div class="item-label">用户ID：</div>
            <div class="item-value">{{ getUserInfo.sequence }}</div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">昵称：</div>
            <div class="item-value">{{ getUserInfo.nickname }}</div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">邮箱：</div>
            <div class="item-value">{{ getUserInfo.mail || "未绑定" }}</div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">微信：</div>
            <div class="item-value">{{ getUserInfo.bindWx ? "已绑定" : "未绑定" }}</div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">手机号：</div>
            <div class="item-value">{{ getUserInfo.mobile || '未绑定' }}</div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">token：</div>
            <div class="item-value mob-token">
                <span>{{ getUserInfo.apiToken }}</span>
                <div style="color: blanchedalmond;">
                    长按复制
                </div>
            </div>
        </div>
        <div class="userinfo-item">
            <div class="item-label">注册时间：</div>
            <div class="item-value">{{ getUserInfo.registerTime }}</div>
        </div>
    </div>
</template>

<script setup>
import { useLongTap, useCopyText } from "@usehook"
import { storeToRefs, useUserStore } from "@/pinia"

const { getUserInfo } = storeToRefs(useUserStore())
const attrs = useAttrs()

let stop = () => void 0
watch(() => attrs.modelValue, v => {
    setTimeout(() => {
        if (v) {
            stop = useLongTap(document.querySelector(".mob-token"), () => useCopyText(getUserInfo.value.apiToken))
        } else {
            stop()
        }
    });
}, { immediate: true })
</script>


<style>
.mobile .userinfo-drawer .el-drawer__body {
    padding: 5px;
}

.userinfo-item {
    display: flex;
    align-items: center;
    padding-top: 20px;
}

.userinfo-item .item-label {
    width: 70px;
    text-align: right;
}

.userinfo-item .item-value {
    width: calc(100% - 80px);
}
</style>